<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, li {
      list-style: none;
    }

    .container {
      width: 1200px;
      margin: 0 auto;
    }

    .header,
    .nav,
    .banner,
    .footer,
    h3,
    li > div {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 60px;
    }

    .header {
      height: 80px;
      background-color: pink;
    }

    .nav {
      height: 100px;
      background-color: skyblue;
    }

    .banner {
      height: 400px;
      background-color: purple;
    }

    .footer {
      height: 500px;
      background-color: #ccc;
    }

    ul > li {
      width: 100%;
      margin: 20px 0;
    }

    ul > li > h3 {
      width: 100%;
      height: 70px;
      color: #333;
    }

    ul > li > div {
      width: 100%;
      height: 600px;
      background-color: orange;
    }

    ol {
      width: 50px;
      height: 300px;
      position: fixed;
      top: 200px;
      right: 50px;
      border-bottom: 1px solid #333;
    }

    ol > li {
      width: 50px;
      height: 50px;
      border: 1px solid #333;
      border-bottom: 0;
      box-sizing: border-box;
      cursor: pointer;
    }

    ol > li.active {
      background-color: skyblue;
      color: #fff;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="header">头部</div>
    <div class="nav">导航</div>
    <div class="banner">轮播图</div>

    <!-- 楼层 -->
    <div class="storey">
      <ul>
        <li>
          <h3>一楼</h3>
          <div>内容</div>
        </li>
        <li>
          <h3>二楼</h3>
          <div>内容</div>
        </li>
        <li>
          <h3>三楼</h3>
          <div>内容</div>
        </li>
        <li>
          <h3>四楼</h3>
          <div>内容</div>
        </li>
        <li>
          <h3>五楼</h3>
          <div>内容</div>
        </li>
        <li>
          <h3>六楼</h3>
          <div>内容</div>
        </li>
      </ul>
    </div>

    <div class="footer">底部</div>
  </div>

  <!-- 楼层导航 -->
  <div class="storeyNav">
    <ol>
      <li class="active">一楼</li>
      <li>二楼</li>
      <li>三楼</li>
      <li>四楼</li>
      <li>五楼</li>
      <li>六楼</li>
    </ol>
  </div>

  <script src="../jquery/jquery-3.6.0.js"></script>
  <script>

    /*
      scroll 事件里面
        判断的是某一个 li 是否进入了屏幕
        如果进入了屏幕，应该让 storeyNav 对应索引的那一个有 active 类名

      每一个 storeyNav 里面的 li 添加点击事件
        我点击的第 0 个 li
        浏览器卷去的高度改变，改变成 storey 里面索引对应的哪个 li 的 offset().top
    */

    // $('ul > li').each(function (index, item) {
    //   // each 遍历以后，其实就是获取的元素集合中的每一个
    //   // 这个每一个是 DOM 元素
    //   // 要使用 $(item) 转换成 jQuery 的元素
    //   console.log(index, item)
    // })

    $(window).scroll(function () {
      // 判断某一个 li 是否进入了屏幕
      // 不好用隐士迭代
      // 因为某一个 li 进入屏幕的时候，我要拿到这个 li

      // 按照隐式迭代来书写
      // $('ul > li').offset().top < $(window).scrollTop() + $(window).height()
        // 你是哪一个 li

      // 我们要自己遍历他
      //   拿到每一个
      //   然后也比较
      // each() 方法用来遍历的
      //   each(function (index, item) {})

      $('ul > li').each(function (index, item) {

        // 判断你是否进入屏幕
        if ($(item).offset().top + 150 < $(window).scrollTop() + $(window).height()) {

          // console.log($(item).index(),"进入了视野");

          // 证明我进入屏幕了
          $('ol > li')
            .eq(index)
            .addClass('active')
            .siblings()
            .removeClass('active')
          }
          
      })
    })

    /*  */
    $('ol > li').click(function () {
      // 点击哪一个拿到对应索引
      const index = $(this).index()

      // 拿到 storey 楼层对应 li 距离页面顶端的距离
      const top = $('ul > li').eq(index).offset().top

      // 操作滚动条
      // $(window).scrollTop(top)
      $('html').animate({
        scrollTop: top - 150
      })

    })

  </script>
</body>
</html>
